<!DOCTYPE html>
<html>
<head>
    <title>3D手势控制演示</title>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
        }

        .header {
            background-color: #333;
            color: white;
            padding: 1rem;
            height: 60px;
        }

        .container {
            display: flex;
            height: calc(100vh - 60px);
        }

        .sidebar {
            width: 250px;
            background-color: #f5f5f5;
            padding: 1rem;
            min-width: 250px;
        }

        .nav-menu {
            list-style: none;
            margin-top: 20px;
            width: 100%;
        }

        .nav-menu li {
            padding: 15px 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            border-radius: 5px;
            margin-bottom: 10px;
            background-color: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            width: 100%;
        }

        .nav-menu li:hover, .nav-menu li.selected {
            background-color: #333;
            color: white;
            transform: translateX(5px);
        }

        .content {
            flex: 1;
            padding: 1rem;
            background-color: #fff;
            position: relative;
        }

        #status {
            position: absolute;
            top: 20px;
            right: 20px;
            padding: 10px;
            background-color: rgba(0,0,0,0.7);
            color: white;
            border-radius: 5px;
            z-index: 100;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>3D手势控制演示</h1>
    </div>

    <div class="container">
        <div class="sidebar">
            <ul class="nav-menu">
                <li onclick="location.href='/'">首页</li>
                <li onclick="location.href='/3d-demo'">3D手势控制演示</li>
            </ul>
        </div>

        <div class="content">
            <div id="status">状态: 等待连接...</div>
        </div>
    </div>

    <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.159.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.159.0/examples/jsm/"
            }
        }
    </script>
    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // 创建场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xf0f0f0);

        // 创建相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.querySelector('.content').appendChild(renderer.domElement);

        // 创建控制器
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;

        // 创建立方体
        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // 添加光源
        const light = new THREE.DirectionalLight(0xffffff, 1);
        light.position.set(1, 1, 1);
        scene.add(light);
        scene.add(new THREE.AmbientLight(0x404040));

        // 设置目标位置和缩放
        const targetPosition = new THREE.Vector3();
        const targetScale = new THREE.Vector3(1, 1, 1);
        const lerpFactor = 0.1;

        // 连接WebSocket
        const ws = new WebSocket('ws://localhost:8080/ws');
        const status = document.getElementById('status');

        // 获取所有菜单项并存储为数组
        const menuItems = Array.from(document.querySelectorAll('.nav-menu li'));
        const menuUrls = ['/', '/3d-demo'];
        let currentMenuIndex = 1;  // 3d-demo页面默认选中第二个菜单项
        let lastMenuUpdateTime = 0;
        let canConfirm = true;  // 添加确认控制标志

        // 初始化时高亮当前菜单项
        menuItems[currentMenuIndex].classList.add('selected');

        ws.onopen = () => {
            status.textContent = '状态: 已连接';
            status.style.backgroundColor = 'rgba(0,255,0,0.7)';
        };

        ws.onmessage = (event) => {
            const data = JSON.parse(event.data);
            
            if (data.status === 'MOVE' && data.hand_type === 'Right') {
                // 更新立方体位置
                targetPosition.x = (data.x - 50) / 10;
                targetPosition.y = -(data.y - 50) / 10;

                // 更新立方体大小
                const scale = Math.max(0.5, Math.min(2, data.scale * 5));
                targetScale.set(scale, scale, scale);
            }
            // 添加左手控制功能
            else if (data.hand_type === 'Left') {
                const now = Date.now();
                if (now - lastMenuUpdateTime > 1000) {
                    if (data.status === 'MENU') {
                        // 左手上下移动选择菜单
                        const y = data.y;
                        let newIndex = currentMenuIndex;
                        
                        if (y < 35) { // 手向上移动
                            newIndex = Math.max(0, currentMenuIndex - 1);
                        } else if (y > 65) { // 手向下移动
                            newIndex = Math.min(menuItems.length - 1, currentMenuIndex + 1);
                        }
                        
                        // 只有当索引发生变化时才更新
                        if (newIndex !== currentMenuIndex) {
                            menuItems[currentMenuIndex].classList.remove('selected');
                            currentMenuIndex = newIndex;
                            menuItems[currentMenuIndex].classList.add('selected');
                            lastMenuUpdateTime = now;
                            
                            // 当选择了不同的页面时，启用确认功能
                            const currentPath = window.location.pathname;
                            const targetUrl = menuUrls[currentMenuIndex];
                            canConfirm = currentPath !== targetUrl;
                        }
                    }
                    else if (data.status === 'CONFIRM' && canConfirm) {
                        // 只有当canConfirm为true时才执行跳转
                        const targetUrl = menuUrls[currentMenuIndex];
                        if (targetUrl && targetUrl !== window.location.pathname) {
                            window.location.href = targetUrl;
                        }
                        lastMenuUpdateTime = now;
                    }
                }
            }
        };

        ws.onerror = () => {
            status.textContent = '状态: 连接错误';
            status.style.backgroundColor = 'rgba(255,0,0,0.7)';
        };

        function animate() {
            requestAnimationFrame(animate);

            cube.position.lerp(targetPosition, lerpFactor);
            cube.scale.lerp(targetScale, lerpFactor);
            
            if (cube.scale.x > 1.5) {
                cube.rotation.x += 0.02;
                cube.rotation.y += 0.02;
            } else {
                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;
            }

            controls.update();
            renderer.render(scene, camera);
        }

        window.addEventListener('resize', onWindowResize, false);

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        animate();
    </script>
</body>
</html> 